<template>
  <div class="body">
    <table border="1" width="95%" style="border-collapse: collapse; margin: 20px auto; text-align: center">
      <tr style="height: 50px">
        <td v-if="weldData.cardInfo" colspan="4">
          <el-image :src="weldData.cardInfo.logo | imgPath" class="image" style="height: 90px; width: 300px; margin: 0 auto">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </td>
        <td colspan="13" class="text-size">
          焊缝返修施焊记录及外观检查记录卡
        </td>
        <td colspan="3">
          <div>第1页</div>
          <div style="border-top: 1px solid">共1页</div>
        </td>
      </tr>
      <tr style="height: 80px">
        <td colspan="2">产品名称</td>
        <td v-if="viewShows" colspan="3" class="yellow">
          {{ weldData.name }}
        </td>
        <td v-else colspan="3">
          <el-input
              v-model="obj.name"
              placeholder="请输入产品名称"
          />
        </td>
        <td>产品编号</td>
        <td v-if="viewShows" colspan="2" class="yellow">
          <span v-if="weldData.cardInfo">{{ weldData.cardInfo.productNum }}</span>
        </td>
        <td v-else colspan="2">
          <el-input
              v-model="obj.productNum"
              placeholder="请输入产品编号"
          />
        </td>
        <td colspan="2">焊接工艺编号</td>
        <td v-if="viewShows" colspan="3" class="yellow">
          {{ obj.craftsSerialNumber }}
        </td>
        <td v-else colspan="3">
          <el-input v-model="obj.craftsSerialNumber" placeholder="请输入焊接工艺编号" />
        </td>
        <td>焊接方法</td>
        <td v-if="viewShows" colspan="3" class="yellow">
          <span v-if="weldData.weldingMethodList">{{ weldData.weldingMethodList.map((item) => item.name).join("+") }}</span>
        </td>
        <td v-else colspan="3">
          <el-select v-model="obj.weldingMethodId" placeholder="请选择">
            <el-option v-for="(item, index) in methodsList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </td>
        <!-- <td colspan="2">焊接设备</td>
        <td>BSTS</td> -->
      </tr>
      <tr style="height: 20px">
        <td colspan="14">施焊记录</td>
        <td colspan="7">外观检查记录</td>
      </tr>
      <tr style="height: 20px">
        <td rowspan="2" class="green">焊缝编号</td>
        <td rowspan="2" class="green">焊接层道</td>
        <td rowspan="2" class="green">层间温度</td>
        <td rowspan="2" class="green">预热温度</td>
        <td rowspan="2" class="green">焊材</td>
        <td colspan="3">焊接参数</td>
        <td rowspan="2" class="green">保护气体种类</td>
        <td rowspan="2" class="green">保护气体流量</td>
        <td rowspan="2" class="green">焊工代号</td>
        <td rowspan="2" class="green">日期</td>
        <td rowspan="2" class="blue">错边</td>
        <td rowspan="2" class="blue">焊脚高</td>
        <td rowspan="2" class="blue">余高</td>
        <td rowspan="2" class="blue">表面缺陷</td>
        <td rowspan="2" class="blue">日期</td>
        <td rowspan="2" class="blue">检查结果</td>
      </tr>
      <tr>
        <td class="green">电流</td>
        <td class="green">电压</td>
        <td class="green">速度</td>
      </tr>
      <!-- <tr>
        <td>扫码</td>
        <td>手选</td>
        <td class="green">采集</td>
        <td class="green">采集</td>
        <td colspan="3">手选</td>
        <td class="green">采集</td>
        <td class="green">采集</td>
        <td class="green">采集</td>
        <td>手选</td>
        <td class="green">采集</td>
        <td class="green">采集</td>
        <td class="green">采集</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr> -->
      <tr
          v-for="(item, index) in weldData.weldsOperationRecordList"
          :key="index"
      >
        <td v-if="item.weldSerialNum">{{ item.weldSerialNum }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.layer">{{ item.layer }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.waterTemp">{{ item.waterTemp }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.temp">{{ item.temp }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.weldMaterial">{{ item.weldMaterial }}</td>
        <td v-else>暂无数据</td>
        <!-- <td>内容</td> -->
        <!-- <td v-else>暂无数据</td> -->
        <!-- <td>内容</td> -->
        <!-- <td v-else>暂无数据</td> -->
        <td v-if="item.current">{{ item.current }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.voltage">{{ item.voltage }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.ssSpeed">{{ item.ssSpeed }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.protectiveGasList">
          {{ item.protectiveGasList.map((item) => item.name).join("+") }}
        </td>
        <td v-else>暂无数据</td>
        <td v-if="item.airFlux">{{ item.airFlux }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.personCode">{{ item.personCode }}</td>
        <td v-else>暂无数据</td>
        <td v-if="item.cjTime">{{ item.cjTime }}</td>
        <td v-else>暂无数据</td>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>

      <tr v-show="add == 2">
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td>暂无数据</td>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
      <tr>
        <td colspan="9">
          备注：1、产品焊接试板制备、焊缝返修亦用此表记录；2、如需焊前预热，应在右栏内记录加热方式、预热温度范围、测温方法。
        </td>
        <td colspan="11" style="text-align: left">
          <div style="" class="box">
            <div>预热方法:</div>
            <el-checkbox-group v-model="preheatCheckList">
              <el-checkbox label="氧乙炔火焰加热" />
              <el-checkbox label="红外线加热" />
            </el-checkbox-group>
            <div style="margin-left: 30px">
              预热范围：<input
                v-model="obj.preheatingScope"
                type="text"
                style="
                    width: 200px;
                    border: none;
                    border-bottom: 1px solid;
                    outline: none;
                  "
            >
            </div>
          </div>
          <div style="margin-bottom: 20px" class="box">
            <span>测温方法:</span>
            <el-checkbox-group v-model="thermometryCheckList">
              <el-checkbox label="热电偶" />
              <el-checkbox label="红外线测温仪" />
            </el-checkbox-group>
          </div>
        </td>
      </tr>
    </table>

    <div
        style="display: flex; justify-content: space-around; margin-top: 20px"
    >
      <div style="display: flex; align-items: center">
        <span>检验员：</span><el-input
          v-model="obj.inspector"
          placeholder=""
          style="width: 200px"
          :class="{ disabled: show }"
      />
      </div>
      <div style="display: flex; align-items: center">
        <span>日期：</span>
        <el-date-picker
            v-model="obj.date"
            type="date"
            placeholder=""
            :class="{ disabled: show }"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { postHandle } from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'WeldsView',
  props: {
    id: {
      typeof: String,
      default: ''
    }
  },

  data() {
    return {
      weldData: {},
      add: 0,
      viewShow: true,
      viewShows: true,
      show: false,
      preheatCheckList: [],
      thermometryCheckList: [],
      preheatList: [],
      thermometryList: [],
      obj: {
        spaceId: '',
        weldingMethodId: '',
        cardId: '',
        craftsSerialNumber: '',
        name: '',
        productNum: '',
        inspector: '',
        date: '',
        preheatingScope: '',
        preheatingMethodId: '',
        cwMethodId: ''
      },
      craftsInfoList: [],
      methodsList: []
    }
  },

  computed: {
    ...mapGetters(['spaceId'])
  },

  watch: {
    weldData: {
      handler() {
        if (this.weldData.weldsOperationRecordList.length == 0) {
          this.weldData.weldsOperationRecordList.push({})
        }
        this.obj.inspector = this.weldData.inspector
        this.obj.date = this.weldData.ct
        this.obj.name = this.weldData.name
        this.obj.productNum = this.weldData.productNum
        this.obj.craftsSerialNumber = this.weldData.craftsSerialNumber
        this.obj.weldingMethodId = this.weldData.weldingMethodId
        this.obj.preheatingScope = this.weldData.preheatingScope
        if (this.weldData.preheatingMethodList) {
          this.preheatCheckList = this.weldData.preheatingMethodList.map(
            (item) => {
              return item.name
            }
          )
        }
        if (this.weldData.cwMethodList) {
          this.thermometryCheckList = this.weldData.cwMethodList.map((item) => {
            return item.name
          })
        }
      }
    },
    viewShow(value) {
      this.viewShows = value
    }
  },

  created() {
    this.getData()
  },

  methods: {
    getData() {
      postHandle(
        '/api/v1/welder-sbtx-second/welds-record-basic-info-comb/show/' + this.id
      )
        .then((res) => {
          this.weldData = res.result
        
        })
        .catch((res) => {
          console.log(res)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  background: #ffffff;
  height: 100%;
  padding-top: 40px;
}
.el-button--primary {
  float: right;
  margin-right: 50px;
}
table td {
  height: 50px;
}
.button {
  display: flex;
  justify-content: end;
}
// .yellow {
//   background: #ffff00;
// }
// .green {
//   background: #99ff99;
// }
// .blue {
//   background: #cc99ff;
// }
::v-deep .disabled .el-input__inner {
  border: none;
}
.el-checkbox__input {
  margin-left: 10px;
}
.el-input--medium {
  width: 80%;
}
.btn-boxs {
  display: flex;
  justify-content: center;
  margin-top: 200px;
  .btn {
    width: 100px;
    height: 40px;
  }
}
.text-size {
  font-size: 25px;
  letter-spacing: 10px;
  font-weight: 550;
  height: 80px;
  position: relative;
}
.box {
  margin-left: 30px;
  display: flex;
  margin-top: 20px;
}
.el-image {
  display: block !important;
}
</style>
